.layout-basic {
    height: 100%;
    :global {
        .arco-layout-footer {
            height: 64px;
            background-color: var(--color-fill-3);
        }

        .arco-layout-sider {
            background-color: var(--color-primary-light-3);
        }

        .arco-layout-content {
            padding: 10px;
            .ka-wrapper, .ka-content {
                height: 100%;
            }
        }
        .arco-layout {
            overflow: hidden;
        }
    }

}


.layout-sider {
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    box-sizing: border-box;

    ::-webkit-scrollbar {
        width: 12px;
        height: 4px;
    }

    ::-webkit-scrollbar-thumb {
        border: 4px solid transparent;
        background-clip: padding-box;
        border-radius: 7px;
        background-color: var(--color-text-4);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-text-3);
    }

    //&::after {
    //    content: '';
    //    display: block;
    //    position: absolute;
    //    top: 0;
    //    right: -1px;
    //    width: 1px;
    //    height: 100%;
    //    background-color: var(--color-border);
    //}

    > :global(.arco-layout-sider-children) {
        overflow-y: hidden;
    }

    .collapse-btn {
        height: 24px;
        width: 24px;
        background-color: var(--color-fill-1);
        color: var(--color-text-3);
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        // 位置
        position: absolute;
        bottom: 12px;
        right: 12px;

        &:hover {
            background-color: var(--color-fill-3);
        }
    }
}
